<template>
    <div class="index box">
        <TopTitle Title="less"></TopTitle>
        <p class="text"><i>npm install less less-loader</i>安装less依赖包</p>
        <p class="text">在<i>webpack.base.conf.js</i>中的<i>module.export</i>对象中，对<i>rules</i>添加</p>
        <p><i>{
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
            }</i></p>

        <p class="mixins">
            如果报错less，则要安装<i>npm audit fix和npm audit fix —force</i>然后再启动
        </p>
    </div>
</template>
<script>
import TopTitle from '../topTitle/topTitle1'
export default {
    name:'lessCss',
    components:{
        TopTitle
    },
    data(){
        return{

        }
    }
}
</script>
<style scoped lang="less">
// 变量式
@color:#ff0055;
@lineHeight:70px;
@BColor:rgba(0,0,0,0.3);
@width:100%;
.onlinecli(){
    font-weight:bold
}
.box{
    line-height: @lineHeight;
    height: 100%;
    background: @BColor;
    width:100%;
    font-size:30px;
    i{
        color:@color
    }
    .text{
        color: #000;;
        height:@width;
        background:#ccc
    }
    .mixins{
        // mixins写法
        .text();//调用的上面class的样式,下面的样式可以覆盖之前的
        width:100%;
        .onlinecli()
    }
}
</style>

